<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                    <el-breadcrumb-item><span class="main-Clr-ft">用户管理</span></el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>

            <div class="pl20 pr20">
                <el-card class="mb20 cardWidth">
                    <div slot="header">
                        <span>条件查询</span>
                    </div>
                    <el-form :inline="true"  :model="formData" ref="formData" class="noMarginBottom">
                        <el-form-item label="账号:"prop="accountValue" class="mb1">
                            <el-input v-model.trim="formData.accountValue" placeholder="搜索账号..." size="small" class="inputWidth"></el-input>
                        </el-form-item>
                        <el-form-item class="mb1" prop="userName" label="用户名">
                            <el-input placeholder="请输入用户名称" size="small" v-model.trim="formData.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" class="mb1" prop="stateValue">
                            <el-select v-model="formData.stateValue"  size="small">
                                <el-option
                                        v-for="item in optionState"
                                        :label="item.value"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="mb1 fltRt">
                            <el-button @click="resetMessage('formData')" size="small" class="bkmgColor">重置</el-button>
                        </el-form-item>
                        <el-form-item class="mb1 fltRt">
                            <el-button type="primary" @click="searchMessage()" size="small">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card class="cardWidth">
                    <div slot="header">
                        <span>用户列表</span>
                    </div>
<!--                    <el-button-group class="mb20">-->
<!--                        <el-button size="small" @click="selectAll(getPageData())">全选</el-button>-->
<!--                        <el-button size="small" @click="electReverse(getPageData())">反选</el-button>-->
<!--                        <el-dropdown class="letBorder">-->
<!--                            <el-button size="small">-->
<!--                                更多操作<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                            </el-button>-->
<!--                            <el-dropdown-menu slot="dropdown" size="small">-->
<!--                                <el-dropdown-item @click.native = 'batchEnable'>批量启用</el-dropdown-item>-->
<!--                                <el-dropdown-item @click.native = 'batchProhibit'>批量禁用</el-dropdown-item>-->
<!--                                <el-dropdown-item @click.native = 'batchDelete'>批量删除</el-dropdown-item>-->
<!--                            </el-dropdown-menu>-->
<!--                        </el-dropdown>-->
<!--                    </el-button-group>-->
                    <span class="fltRt">
                        <el-button type="text" icon="iconfont icon-tianjia" @click="addUser" size="small">添加</el-button>
                    </span>

                    <el-table
                            ref="multipleTable"
                            border
                            stripe
                            :header-cell-style="getRowClass"
                            tooltip-effect="dark"
                            height="335"
                            :data="getPageData()"
                            @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="48"></el-table-column>
                        <el-table-column prop="userName" label="用户名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="accountName" label="账号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="emailAddress" label="邮箱地址" show-overflow-tooltip width="200"></el-table-column>
                        <el-table-column prop="enable" label="状态" show-overflow-tooltip width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.enable=='1'" >启用</span>
                                <span v-else-if="scope.row.enable=='0'" v-bind:style="{color:'red'}">禁用</span>
                                <!--<span v-else>禁用</span>-->
                            </template>
                        </el-table-column>
                        <el-table-column prop="updateDate" label="操作时间" show-overflow-tooltip width="200"></el-table-column>
                        <el-table-column prop="operation" label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button title="查看" type="text" size="small" @click="showDetail(scope.row)" icon="iconfont icon-chakan"></el-button>
                                <el-button title="编辑" type="text" size="small" @click="editUserMessage(scope.row)" icon="iconfont icon-bianji"></el-button>
                                <el-button v-if="scope.row.enable=='0'" title="启用" type="text" size="small" @click="editEnable(scope.row)" icon="iconfont icon-jinyong"></el-button>
                                <el-button v-else-if="scope.row.enable=='1'" title="禁用" type="text" size="small" @click="editEnable(scope.row)" icon="iconfont icon-jinyong"></el-button>
                                <el-button title="删除" class="deleteButtonColor" type="text" size="small" @click="deleteUserMessage(scope.row)" icon="iconfont icon-shanchu"></el-button>
                                <el-button title="重置密码" type="text" size="small" @click="resetePassword(scope.row)" icon="iconfont icon-zhongzhimima"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="mt15 textAlignRight">
                        <el-pagination
                                layout="total,sizes,prev, pager, next,jumper"
                                :total="tableData.length"
                                @size-change="handleSizeChange"
                                :current-page.sync="currentPage"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="pagesize">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
            <div class="bottomLayoutBus"></div>

        </el-container>

    </div>
</template>

<script>
    import urlConfig from '../../../config/url.json';
    import Vue from 'vue';
    import { Message } from 'element-ui';

    Vue.component(Message.name, Message);

    let userUrl=urlConfig.userManage;
    let editStatusurl=urlConfig.userStatus;
    let resetPwdUrl=urlConfig.resetPwd;

    export default {
        data() {
            return {
                value2:'',
                tableData: [],
                requestUrl:'',
                currentPage: 1,
                pagesize: 5,
                optionState:[
                    {
                    code:-1,
                    value:'全部',
                },{ code:1,
                    value:'启用',
                },{
                    code:0,
                    value:'禁用',
                }],
                formData: {
                    userName:'',
                    accountValue:'',
                    stateValue:{code:-1,value:'全部'}
                },
            }
        },
        methods: {

            //分页后的显示数据
            getPageData(){
                let that=this;
                return that.tableData.slice((that.currentPage-1)*that.pagesize,that.currentPage*that.pagesize);
            },
            searchMessage(){
                var userName='';
                var accountValue = '';
                let that=this;
                var stateValue = that.formData.stateValue.code;
                if(that.formData.userName){
                    userName = that.formData.userName;
                }
                if(that.formData.accountValue){
                    accountValue = that.formData.accountValue
                }
                that.selectUserData(accountValue,userName,stateValue);
            },
            //向后台查询用户
            selectUserData(accountValue,userName,stateValue){
                let that=this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                this.$http({
                    method: 'get',
                    url: userUrl,
                    baseURL:'/api',
                    params:{
                        'accountValue':accountValue,
                        'userName':userName,
                        'stateValue':stateValue,

                    }
                }).then(function(response){
                    if(response.data.code==200){
                        that.tableData=response.data.data.userInfos;
                    }
                    else{
                        Message.error('获取数据失败');
                    }
                    loading.close();
                }).catch(function(err){
                    console.log(err);
                    Message.error('获取数据失败');
                    loading.close();
                });

            },

            //批量启用
            batchEnable(){

            },

            //批量禁用
            batchProhibit(){

            },

            //批量删除
            batchDelete(){

            },

            //全选
            selectAll(rows){
                rows.forEach(row=>{
                    this.$refs.multipleTable.toggleAllSelection(row);
                });
            },

            //反选
            electReverse(rows){
                rows.forEach(row=>{
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            },
            //设置表头颜色
            getRowClass({ rowIndex }) {
                if (rowIndex == 0) {
                    return 'background:#F5F7FA'
                } else {
                    return ''
                }
            },

            //重置
            resetMessage (formName) {
                this.$refs[formName].resetFields();
                this.getAllData();
            },

            //添加
            addUser(){
                this.$router.push({
                    path:'/mainPage/userManageSpEditRoleGroup',
                    query: {
                        params:'add'
                    }
                })
            },

            //编辑
            editUserMessage (row){
                this.$router.push({
                    path:'/mainPage/userManageSpEditRoleGroup',
                    query: {
                        params:'edit',
                        id:row.id
                    }
                })
            },

            //启用/禁用
            editEnable(row){
                let that=this;
                if(row.enable==1){
                    var content = '确定禁用    <span class="main-Clr-ft">'+row.accountName   +'</span>    用户吗,禁用后用户将无任何操作权限？'
                }
                else
                {
                    var content = '确定启用    <span class="main-Clr-ft">'+row.accountName   +'</span>    用户吗'

                }
                this.$confirm(content,'温馨提示',{
                    dangerouslyUseHTMLString: true,
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                    });
                    this.$http({
                        method: 'put',
                        url: editStatusurl,
                        baseURL:'/api',
                        data:{
                            'id':row.id,
                            'enable':row.enable,
                        }
                    }).then(function(response){
                        if(response.data.code==200) {
                            Message.success('操作成功');
                            that.selectUserData('','-1');
                        }else{
                            Message.error('操作失败');
                        }
                        loading.close();
                    }).catch(function(err){
                        Message.error('操作失败');
                        console.log(err);
                        that.selectUserData('','-1');
                        loading.close();
                    });
                }).catch(() => {
                    Message.info('已取消操作');
                });
            },

            //删除
            deleteUserMessage (row) {

                let that=this;
                if(row.enable=='0'){
                    this.$confirm('确定要删除    <span class="main-Clr-ft">'+ row.accountName   +'</span>    用户吗？','温馨提示',{
                        dangerouslyUseHTMLString: true,
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                        });
                        this.$http({
                            method: 'delete',
                            url: userUrl,
                            baseURL:'/api',
                            data:{
                                id:row.id
                            }
                        }).then(function(response){
                            if(response.data.code>199 && response.data.code<400) {
                                Message.success('删除'+ row.accountName +'用户成功');
                                that.selectUserData('','-1');
                            }else{
                                Message.error('删除'+ row.accountName +'用户失败');
                            }
                            loading.close();
                        }).catch(function(err){
                            console.log(err);
                            Message.error('删除'+ row.accountName +'用户失败');
                            loading.close();
                        });
                    }).catch(() => {

                        Message.info('已取消删除');
                    });
                }else{
                    Message.warning('请先将用户停用');
                }

            },

            //重置密码
            resetePassword(row){
                let that=this;
                this.$confirm('确定要重置用户    <span class="main-Clr-ft">'+ row.accountName   +'</span>    的密码吗？','温馨提示',{
                    dangerouslyUseHTMLString: true,
                    confirmButtonText:'重置密码',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                    });
                    this.$http({
                        method: 'post',
                        url: resetPwdUrl,
                        baseURL:'/api',
                        data:{
                            'id':row.id,
                        }
                    }).then(function(response){
                        if(response.data.code>199 && response.data.code<400) {
                            if (!response.data.data) {
                                return;
                            }
                            Message.success('重置密码成功');
                            that.selectUserData('','-1');
                        }else{
                            Message.error('重置密码失败');
                        }
                        loading.close();
                    }).catch(function(err){
                        Message.error('重置密码失败');
                        console.log(err);
                        that.selectUserData('','-1');
                        loading.close();
                    });
                }).catch(() => {
                    Message.info('已取消重置用户'+ row.accountName +'密码');
                });
            },

            //查看
            showDetail(row){
                this.$router.push({
                    path:'/mainPage/userManageSpEditRoleGroup',
                    query: {
                        params:'see',
                        id:row.id
                    }
                })
            },


            //选择项发生变化时触发
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //选择每页显示条数时触发
            handleSizeChange(val) {
                this.pagesize=val;
            },


        },
        mounted() {
            let that=this;
            that.selectUserData('','','-1');
        }
    }
</script>

<style scoped>
    .headerCoster{
        height: 59px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .deleteButtonColor{
        color: red;
    }

    .letBorder{
        border-left: #DCDFE6 solid 1px;
    }

    .cardWidth{
        width: 100%;
    }
</style>